<template>
  <div class="container">
    <div class="left" :style="{width: isCollapse ? '65px' : '200px'}">
      <div class="logo" :style="{backgroundColor: currentColor}">
        <div>{{isCollapse ? 'Bing' : 'Bing酒店管理系统'}}</div>
      </div>
      <el-menu
        active-text-color="#ffd04b"
        :background-color="currentColor"
        class="el-menu-vertical-demo"
        text-color="#fff"
        :collapse="isCollapse"
        router
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><User /></el-icon>
            <span>账户管理</span>
          </template>
          <el-menu-item 
            index="/layout/role" 
          >角色管理</el-menu-item>
          <el-menu-item 
            index="/layout/account"
          >账户管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>客房管理</span>
          </template>
          <el-menu-item index="/layout/roomType">类型管理</el-menu-item>
          <el-menu-item index="/layout/room">客房管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>顾客管理</span>
          </template>
          <el-menu-item index="/layout/guest">顾客管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="4-1">权限管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="right">
      <div class="top">
        <el-menu
          default-active="1"
          class="el-menu-demo"
          mode="horizontal"
          :background-color="currentColor"
          text-color="#fff"
          active-text-color="#ffd04b"
          :ellipsis="false"
        >
          <div class="control-icon" @click="controlSide">
            <el-icon v-show="!isCollapse" size="26" color="white"><Fold /></el-icon>
            <el-icon v-show="isCollapse" size="26" color="white"><Expand /></el-icon>
          </div>
          <div class="flex-grow" />
          <el-menu-item index="1" @click="handleTopMenu">
            <el-icon><House /></el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="2" @click="handleTopMenu">
            <el-icon><Message /></el-icon>
            邮件
          </el-menu-item>
          <el-menu-item index="3" @click="handleTopMenu">
            <el-icon><ChatDotRound /></el-icon>
            消息
          </el-menu-item>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><Switch /></el-icon>
              切换主题
            </template>
            <el-menu-item :index="`4-${i + 1}`" v-for="(name, i) in getColorNames" :key="name" @click="changeTheme(i)">{{name}}</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><Key /></el-icon>
              {{currentAdmin.name}}
            </template>
            <el-menu-item index="5-1" @click="handleTopMenu">个人中心</el-menu-item>
            <el-menu-item index="5-2" @click="handleTopMenu">修改密码</el-menu-item>
            <el-menu-item index="5-3" @click="exit">退出系统</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="bottom">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, computed, onBeforeMount} from 'vue';
import {
  User,
  OfficeBuilding,
  Avatar,
  Setting,
  Fold,
  House,
  Message,
  ChatDotRound,
  Switch,
  Key,
} from '@element-plus/icons-vue';
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
import {getAdminDetail} from '../api/admin';

export default {
  name: 'Layout',
  setup(){
    const $store = useStore();
    const $router = useRouter();

    const menuData = reactive({
      // activeIndex1: '1',
      isCollapse: false, //侧边栏是否折叠
    });

    onBeforeMount(async () => {
      const token = sessionStorage.getItem('token');

      if(!token){
        //未登录
        $router.push('/login');
      }else{
        //已登录
        $router.push('/layout');
      }

      const loginId = localStorage.getItem('loginId');
      const data = await getAdminDetail({loginId});

      $store.commit('admin/updateAdminInfo', data);
    });

    //点击侧边栏收起、展开按钮
    const controlSide = () => {
      menuData.isCollapse = !menuData.isCollapse;
    }

    //生成颜色名数组
    const getColorNames = computed(() => {
      return $store.getters['theme/getColorNames'];
    });

    //当前主题颜色
    const currentColor = computed(() => {
      return $store.state.theme.currentTheme.color;
    });

    //登录用户信息
    const currentAdmin = computed(() => {
      return $store.state.admin.adminInfo;
    });

    //改变主题
    const changeTheme = (index) => {
      const newTheme = $store.state.theme.colors[index];

      localStorage.setItem('theme', JSON.stringify(newTheme));
      $store.commit('theme/updateCurTheme', newTheme);
    }

    //退出系统
    const exit = () => {
      sessionStorage.removeItem('token');
      localStorage.removeItem('loginId');
      localStorage.removeItem('loginPwd');
      $router.push('/login');
    }

    //顶部菜单点击时的回调函数
    const handleTopMenu = (menuItem) => {
      switch(menuItem.index){
        case '1':
          //首页
          $router.push('/layout');
          break;
        case '2':
          //邮件
          $router.push('/layout/email');
          break;
        case '3':
          //消息
          $router.push('/layout/message');
          break;
        case '5-1':
          //个人中心
          $router.push('/layout/mine');
          break;
        case '5-2':
          //修改密码
          $router.push('/layout/changePwd');
          break;
        default:
      }
    }

    return {
      ...toRefs(menuData),
      controlSide,
      getColorNames,
      currentColor,
      currentAdmin,
      changeTheme,
      exit,
      handleTopMenu,
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    // width: 200px;
    transition: all 0.5s;
    .logo {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: #545c64;
      div {
        font-size: 18px;
        color: white;
        border: solid 1px #EEE;
        padding: 4px 10px;
        border-radius: 4px;
        flex-shrink: 0;
      }
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      height: 60px;
      .el-menu-demo {
        align-items: center;
        height: 100%;
        border-bottom: none;
        .control-icon {
          cursor: pointer;
        }
        .flex-grow {
          flex-grow: 1;
        }
      }
    }
    .bottom {
      flex: 1;
      padding: 10px;
    }
  }
}
</style>